<template>
  <!-- 当前商品id:{{ productId }} -->
  <div class="detail-container">
    <div class="detail-img">
      <img :src="productDetail.image" alt="">
    </div>
    <div class="detail-other">
      <h1>{{ productDetail.name }}</h1>
      <p>{{ productDetail.description }}</p>
      <p>￥<span>{{ productDetail.price }}</span>元</p>
      <div class="buyNum">
        <button @click="decNum">-</button>
        <input type="number" v-model="buyGoodsNum" min="1" :disabled="disabledInput" />
        <button @click="addNum">+</button>
      </div>
      <div class="addCart">
        <button @click="goToCart">加入购物车</button>
      </div>
    </div>
  </div>
</template>

<script setup>
// 引入useRoute接收传递的商品id
import { useRoute } from 'vue-router';
import { ref, onMounted } from 'vue';

import axios from 'axios';

import { useRouter } from 'vue-router';
const router = useRouter()

// 商品id
const route = useRoute()
const productId = route.params.id
const productDetail = ref({})

// 商品默认购买数量
const buyGoodsNum = ref(1)
// 禁用输入框状态，这里默认设置为 false
const disabledInput = ref(false);

// 减少购买商品数量
const decNum = () => {
  if (buyGoodsNum.value > 1) {
    buyGoodsNum.value--
  } else {
    alert('最低购买数量为1')
  }
}
// 增加购买商品数量
const addNum = () => {
  buyGoodsNum.value++
}

// 加入购物车
const goToCart = async () => {
  try {
    const cartItem = {
      Uid: productId,
      name: productDetail.value.name,
      description: productDetail.value.description,
      image: productDetail.value.image,
      category: productDetail.value.category,
      buyNum: buyGoodsNum.value,
      price: productDetail.value.price
    };
    const response = await axios.post('/api/goods/cart/add', cartItem);
    console.log('加入购物车成功:', response.data);
    // 可以在这里添加成功提示逻辑，如弹出提示框
    alert(response.data.message)
    // 跳转回商品页面
    router.push('/dataShow')
  } catch (error) {
    console.error('加入购物车失败:', error);
    // 可以在这里添加错误提示逻辑，如弹出提示框
  }
};

// 根据商品id获取商品数据
onMounted(async () => {
  const res = await axios(`/api/goods/goodsDetails/${productId}`)
  console.log(res.data);
  productDetail.value = res.data

})
</script>

<style scoped>
.detail-container {
  width: 800px;
  height: 400px;
  /* background-color: aqua; */
  margin: 40px auto;
}

.detail-img {
  width: 400px;
  height: 400px;
  float: left;
}

.detail-img img {
  width: 400px;
  height: 400px;
  /* 图片按比例缩放以覆盖容器 */
  object-fit: contain;
}

.detail-other {
  float: left;
  width: calc(800px - 400px - 6px);
  height: 400px;
  /* 计算剩余宽度 */
  text-align: center;
  /* 让内联元素水平居中 */
  border: 3px solid black;
  /* background-color: rgb(210, 16, 120); */
}

.detail-other h1 {
  color: black;
  font-size: larger;
  margin-top: 50px;
}

.detail-other p {
  word-wrap: break-word;
  /* 允许长单词或 URL 地址换行到下一行 */
  word-break: normal;
  /* 使用浏览器默认的换行规则 */
  padding: 0 10px;
  /* 可添加一些内边距，让文字不紧贴容器边缘 */
  font-size: larger;
}

.detail-other p span {
  color: red;
  font-size: larger;
}

.buyNum button {
  width: 60px;
  height: 40px;

}

.buyNum input {
  width: 80px;
  height: 34px;
  text-align: center;
  line-height: 34px;
}

.addCart button {
  width: 210px;
  height: 40px;
  margin-top: 25px;
  background-color: brown;
}
</style>